<template class="task-template">
  <section id="dialogs-section" class="section js-section u-category-native-ui">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
          使用系统对话框
        </h1>
        <h3>Electron 中的 <code>dialog</code> 模块允许您使用本地系统对话框打开文件或目录, 保存文件或显示信息性消息.</h3>

        <p>这是一个主进程模块, 因为这个进程对于本地实用程序更有效, 它允许调用的同时而不会中断页面渲染器进程中的可见元素.</p>

        <p>在浏览器中查看 <a href="http://electron.atom.io/docs/api/dialog/">完整 API 文档<span class="u-visible-to-screen-reader">(在新窗口中打开)</span></a>.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="open-file-demo-toggle" class="js-container-target demo-toggle-button">打开文件或目录
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="select-directory">查看示例</button>
            <span class="demo-response" id="selected-file"></span>
          </div>
          <p>在本示例中, <code>ipc</code> 模块用于从渲染器进程发送一条消息, 指示主进程启动打开的文件（或目录）对话框. 如果选择了文件, 主进程可以将该信息发送回渲染器进程.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/open-file.js"></code></pre>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/open-file.js"></code></pre>

          <div class="demo-protip">
            <h2>高级技巧</h2>
            <strong>macOS 上的工作表样式对话框.</strong>
            <p>在 macOS 上, 您可以在 "工作表" 对话框或默认对话框之间进行选择. 工作表版本是从窗口顶部滑落. 要使用工作表版本, 请将 <code>window</code> 作为对话框方法中的第一个参数.</p>
            <pre><code class="language-js">const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow


ipc.on('open-file-dialog-sheet', function (event) {
  const window = BrowserWindow.fromWebContents(event.sender)
  const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
})</code></pre>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="error-dialog-demo-toggle" class="js-container-target demo-toggle-button">错误对话框
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button id="error-dialog" class="demo-button">查看示例</button>
          </div>
          <p>在本示例中, <code>ipc</code> 模块用于从渲染器进程发送一条消息, 指示主进程启动错误对话框.</p>

          <p>您可以在应用程序的 <code>ready</code> 事件之前使用错误对话框, 这对于在启动时显示错误很有用.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/error.js"></code></pre>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/error.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="information-dialog-demo-toggle" class="js-container-target demo-toggle-button">信息对话框
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="information-dialog">查看示例</button>
            <span class="demo-response" id="info-selection"></span>
          </div>
          <p>在本示例中, <code>ipc</code> 模块用于从渲染器进程发送一条消息, 指示主进程启动信息对话框. 可以提供用于响应的选项, 响应会被返回到渲染器进程中.</p>

          <p>注意：<code>title</code> 属性不会显示在 macOS 中.</p>

          <p>一个信息对话框可以包含图标, 选择的按钮, 标题和消息.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/information.js"></code></pre>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/information.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="save-dialog-demo-toggle" class="js-container-target demo-toggle-button">保存对话框
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Main</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="save-dialog">查看示例</button>
            <span class="demo-response" id="file-saved"></span>
          </div>
          <p>在本示例中, <code>ipc</code> 模块用于从渲染器进程发送一条消息, 指示主进程启动保存对话框. 它返回由用户选择的路径, 并可以将其路由回渲染器进程.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/native-ui/dialogs/save.js"></code></pre>
          <h5>主进程</h5>
          <pre><code data-path="main-process/native-ui/dialogs/save.js"></code></pre>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/native-ui/dialogs/open-file')
      require('./renderer-process/native-ui/dialogs/error')
      require('./renderer-process/native-ui/dialogs/information')
      require('./renderer-process/native-ui/dialogs/save')
    </script>

  </section>
</template>
